<template>
	<view class="wrap app_wrap-gHeaderT20">
		<view class="t-header app_gHeaderFixed">
			<g-header :hideRight="true">
				<template v-slot:title>
					<view class="search">
						<icon type="search" size="16"></icon>
						<input type="text" placeholder="搜索店内商品" placeholder-class="app_phc">
					</view>
				</template>
			</g-header>
		</view>
		<u-waterfall v-model="list" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="warter warterLeft" v-for="(item, index) in leftList" :key="index"
					@click="onSkipTap('dynamicDetail', item.id)">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.url" :index="index"></u-lazy-load>
					<view class="warter-title">
						{{item.title}}
					</view>
					<view class="warter-bottom app_flex-aicjcsb">
						<view class="warter-bottomL">
							<image :src="item.logoImg" mode=""></image>
							<text>{{item.shopName}}</text>
						</view>
						<view class="warter-bottomR">{{item.createDateStr}}</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="warter warterRight" v-for="(item, index) in rightList" :key="index"
					@click="onSkipTap('dynamicDetail', item.id)">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.url" :index="index"></u-lazy-load>
					<view class="warter-title">
						{{item.title}}
					</view>
					<view class="warter-bottom app_flex-aicjcsb">
						<view class="warter-bottomL">
							<image :src="item.logoImg" mode=""></image>
							<text>{{item.shopName}}</text>
						</view>
						<view class="warter-bottomR">{{item.createDateStr}}</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<view class="tabbar">
			<store-tabbar navindex="2"></store-tabbar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				totalPage: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
			}
		},
		onLoad(options) {
			this.updatePage()
		},
		onUnload() {},
		onPullDownRefresh() {
			this.updatePage()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			updatePage() {
				if (this.hasLoad) {
					this.$refs.uWaterfall.clear();
				}
				this.resetPage()
				this.getList()
			},
			resetPage() {
				this.list = []
				this.page = 1
				this.totalPage = 1
				this.size = 15
				this.hasLoad = false
				this.noMore = false
			},
			onSkipTap(type, params) {
				const urlObj = {
					dynamicDetail: () => {
						uni.navigateTo({
							url: `/pages/shopInfo/dynamicDetail?id=${params}`
						})
					},
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			getList() {
				this.$g_api.productNethot({
					pageNum: this.page,
					pageSize: this.size
				}).then(({
					rows,
					totalPage
				}) => {
					uni.stopPullDownRefresh()
					this.hasLoad = true
					this.totalPage = totalPage
					if (rows?.length > 0) {
						rows.forEach(item => {
							if (item.createDate) item.createDate = item.createDate.replace(/-/g, '/')
							item.createDateStr = new Date(item.createDate).Format('yyyy-MM-dd')
							// item.secretTel = item.tel.slice(0, 3) + '****' + item.tel.slice(7, 11)
							item.logoImg = this.$g_util.concatRequestUrl(item.logoImg)
							item.url = this.$g_util.concatRequestUrl(item.url)
						})
						this.list = this.list.concat(rows)
					} else {
						this.noMore = true
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-bottom: calc(20rpx + 100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + 100rpx + env(safe-area-inset-bottom));
	}

	.search {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 630rpx;
		height: 60rpx;
		transform: translateX(24rpx);
		border-radius: 30rpx;
		background-color: #f2f2f2;

		input {
			flex: 1;
			margin-left: 14rpx;
		}
	}

	.nav {
		display: flex;
		align-items: center;
		height: 90rpx;
		background-color: #fff;
		padding: 0 20rpx;
	}

	.nav-item {
		position: relative;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 40rpx;
		font-size: 26rpx;
		color: #333;

		&.active {
			font-size: 32rpx;
			font-weight: bold;

			&::after {
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				content: '';
				width: 60rpx;
				height: 4rpx;
				border-radius: 2rpx;
				background-color: #ff7733;

			}
		}
	}

	.filter {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90rpx;
		padding-left: 20rpx;
		background-color: #fff;
	}

	.filter-L {
		width: 600rpx;
		white-space: nowrap;
	}

	.filter-item {
		display: inline-block;
		padding: 20rpx 0;
		margin-right: 70rpx;
		line-height: 50rpx;

		&:first-child {
			margin-left: 30rpx;
		}

		&:last-child {
			margin-right: 30rpx;
		}

		&.active {
			color: #ff7733;
		}
	}

	.filter-R {
		padding-right: 30rpx;
		font-size: 0;

		image {
			width: 38rpx;
			height: 38rpx;
			// background-color: #ccc;
		}
	}

	.warter {
		border-radius: 8px;
		background-color: #ffffff;
		padding: 16rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.warterLeft {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.warterRight {
		margin-right: 20rpx;
	}


	.water-image {
		width: 100%;
		border-radius: 4px;
	}

	.warter-title {
		font-size: 26rpx;
		color: #333;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		color: $u-main-color;
	}

	.warter-bottom {}

	.warter-bottomL {
		display: flex;
		align-items: center;
		font-size: 0;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
			border-radius: 50%;
			background-color: #eee;
		}

		text {
			font-size: 20rpx;
			color: #333;
		}
	}

	.warter-bottomR {
		font-size: 20rpx;
		color: #999;
	}


	.water-tag {
		display: flex;
		margin-top: 5px;
	}

	.water-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.water-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.water-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		z-index: 99999;
	}
</style>
